<script setup>
import weaponElems from '../../data/LanguageWeaponElementData.json'

const props = defineProps(['data', 'weaponElem'])
const icon = import.meta.env.BASE_URL + 'icons/skill/' + props.data.icon + '.png'
const range = props.data.rangeType == 1 ? '自身' : getRangeArea('range')
const area = props.data.areaType == 1 ? '目标' : getRangeArea('area')

const weaponElem = props.data.weaponElem ? props.weaponElem : 0

function getRangeArea(target) {
  let v = ''
  switch (props.data[target+'Type']) {
    case 1:
      v = target == 'area' ? '目标' : '自身'
      break
    case 2:
      const bound = props.data[target].split(',')[0]/100
      v = bound + '\u00d7' + bound
      break
    case 3:
      v = props.data[target].split(',')[0]/100 + '（曼哈顿距离）'
      break
    case 5:
      v = props.data[target].split(',')[0]/100 + '（直线）'
  }
  return v
}
</script>

<template>
  <div class="skill-item">
    <div class="skill-signature">
      <img :src="icon" alt="普攻图标">
      <div class="skill-name">{{ data.name }}</div>
      <div class="skill-tag">
        <span v-if="weaponElem" :class="['weapon-elem', 'weapon-elem-'+weaponElem]">{{ weaponElems[weaponElem] }}&nbsp;&nbsp;</span>
        {{ data.tag }}
      </div>
    </div>
    <div class="skill-content">
      <div class="skill-desc">
        <p v-if="data.defBreak" class="skill-def-break">稳态伤害：{{ data.defBreak }}</p>
        <p v-html="data.descLv" class="skill-desc-lv"></p>
        <p class="skill-intro">{{ data.intro }}</p>
        <p v-if="data.cd||data.mp" class="skill-limit">
          <span v-if="data.cd">冷却回合 {{ data.cd }}</span>
          <span v-else>导染消耗 {{ data.mp }}</span>
        </p>
      </div>
      <div class="skill-map">
        <dl>
          <dt>有效距离</dt>
          <dd>{{ range }}</dd>
          <dt>作用范围</dt>
          <dd>{{ area }}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>
